<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-04-11 13:50:25
 * @LastEditTime: 2019-08-12 11:26:11
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="home">
    <!-- 首页大图 -->
    <div class="home-top">
      <img src="@/assets/home/home-top.png" alt="首页大图"/>
    </div>
    <!-- 关于我们 -->
    <div class="home-aboutUs" id="home-aboutUs">
      <el-row>
        <el-col :span="8">
          <div ref="homeAboutUsLeftRef">
            <div class="home-aboutUs-left">
              <img style="margin-left:22%" src="@/assets/home/home-logo-picture.png" alt="官网图标"/>
            </div>
          </div>
        </el-col>
        <el-col :span="16">
          <div ref="homeAboutUsRightRef">
            <div class="home-aboutUs-right">
              <p class="home-aboutUs-right-p">关于我们</p>
              <div class="line"></div>
              <div class="home-aboutUs-right-text" style="color:#8A8A8A">
                <p>　贵州梵途科技有限公司，成立于2018年10月， 注册资本1000万元，是国内首家水泥建材行业智慧物流供应链SaaS服务商。</p>
                <p>　公司致力于通过互联网、大数据、人工智能等技术为水泥建材行业上下游提供一站式综合服务，自主研发梵途XTMS智慧物流数字化管理系统。</p>
                <p>　贵州梵途科技旗下搭建的全国大宗物资智慧物流交易平台，是国内创新大宗企业直客+无车承运人物流平台，通过企
                业直客+无车承运人的服务模式，平台直接托管上游大宗企业物流业务，为大宗企业提供全程标准化、可视化整车物
                流直配服务，利用无车承运人模式，直接与货车司机建立标准化承运服务，去除中间物流代理商分包交易环节，全面降低
                  大宗企业物流交易成本，为企业整车物流提供一站式解决案， 实现企业物流降本降费。</p>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 未来世界 -->
    <div class="home-future" id="home-future">
      <div class="home-future-top">
        <p>Future</p>
        <p>欢迎来到未来世界</p>
      </div>
      <el-row>
        <el-col :span="10" :offset="4">
          <div class="home-future-left" style="margin-left:5.5%">
            <p class="home-future-left-title">未来在这里</p>
            <div class="home-future-left-text" style="color:#8A8A8A">
              <p style="letter-spacing:0.5px">梵途科技以传统产业两化融合物流痛点为切入口，为大宗企业量身打造智慧物流云TMS (物流</p>
              <p style="letter-spacing:1.55px">管理)、OMS (订单管理)、RMS (流向管理)三大系统，并匹配物流信息共享、物流电商</p>
              <P style="letter-spacing:0.38px">金融、物流物联开放三大核心运营平台助力企业提升物流信息化能力，区别于传统物流企业单</P>
              <P>纯提供软件或单 纯提供第三方合同物流。</p>
              <p
                style="letter-spacing:0.32px;margin-top:30px"
              >我们通过定制化服务围绕企业行业痛点提供个性化解决方案，用技术赋能企业高效链接物流市</p>
              <p style="letter-spacing:0.08px">场，为企业供应链信息化“上网联云，整合运营' 提供基础设施，帮助传统大宗企业完成在物流</p>
              <p>端的互联网信息化转型升级，提升数字化经营及物流管理能力，助力企业健康发展。</p>
            </div>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="home-future-right">
            <div ref="rotateBox" style="width: 34rem;height:34rem;">
              <div class="rotateBox">
                <div class="rotate">
                  <div class="rotateItem">
                    <div class="rotateItemText">
                      <p style="padding-top:1.7rem">tms</p>
                      <p>(物流管理)</p>
                    </div>
                  </div>
                  <div class="rotateItem">
                    <div class="rotateItemText">
                      <p style="padding-top:1.7rem">oms</p>
                      <p>(订单管理)</p>
                    </div>
                  </div>
                  <div class="rotateItem">
                    <div class="rotateItemText">
                      <p style="padding-top:1.7rem">rms</p>
                      <p>(流向管理)</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div ref="rotateBoxSmall" style="width: 34rem;height:34rem;">
              <div class="rotateBoxSmall">
                <div class="rotateSmall">
                  <div class="rotateItem">
                    <div class="rotateItemText">
                      <p style="line-height:18px;width:80%;margin-left:8px">物流电商金融</p>
                    </div>
                  </div>
                  <div class="rotateItem">
                    <div class="rotateItemText">
                      <p style="line-height:18px;width:80%;margin-left:8px">物流物联开放</p>
                    </div>
                  </div>
                  <div class="rotateItem">
                    <div class="rotateItemText">
                      <p style="line-height:18px;width:80%;margin-left:8px">物流信息共享</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="rotate-title">
              <img src="@/assets/home/home-text.png" alt/>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 我们的世界 -->
    <div class="home-our-word" id="home-our-word">
      <img src="@/assets/home/home-our-word.png" alt="我们的世界"/>
    </div>
    <img
      v-if="this.flag"
      class="return"
      src="@/assets/renturn-top.png"
      alt="回到顶部"
      @click="returnTop"
    />
  </div>
</template>

<script>
  export default {
    name: "Home",
    mounted: function () {
    },
    data() {
      return {
        flag: false
      };
    },
    methods: {
      handleScroll() {
        var scrollTop =
          window.pageXOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop;
        if (scrollTop >= 1000) {
          this.flag = true;
          //    this.$refs.homeAboutUsLeftRef.classList.remove("home-aboutUs-left-animation");
          //    this.$refs.homeAboutUsRightRef.classList.remove("home-aboutUs-right-animation");
          this.$refs.rotateBox.classList.add("rotateBox-animation");
          this.$refs.rotateBoxSmall.classList.add("rotateBoxSmall-animation");
        } else if (scrollTop >= 500 && scrollTop < 1000) {
          this.flag = false;
          this.$refs.homeAboutUsLeftRef.classList.add(
            "home-aboutUs-left-animation"
          );
          this.$refs.homeAboutUsRightRef.classList.add(
            "home-aboutUs-right-animation"
          );
          //    this.$refs.rotateBox.classList.remove("rotateBox-animation");
          //    this.$refs.rotateBoxSmall.classList.remove("rotateBoxSmall-animation");
        } else if (scrollTop > 2400) {
          this.flag = false;
          //    this.$refs.homeAboutUsLeftRef.classList.remove("home-aboutUs-left-animation");
          //    this.$refs.homeAboutUsRightRef.classList.remove("home-aboutUs-right-animation");
          //     this.$refs.rotateBox.classList.remove("rotateBox-animation");
          //    this.$refs.rotateBoxSmall.classList.remove("rotateBoxSmall-animation");
        }
      },
      returnTop: function () {
        document.querySelector("#header").scrollIntoView(true);
      }
    },
    mounted() {
      window.addEventListener("scroll", this.handleScroll);
    },
    destroyed() {
      window.removeEventListener("scroll", this.handleScroll); //移除监听页面滚动事件
    }
  };
</script>
<style scoped>
  .home-top,
  .home-top img {
    width: 100%;
    height: 960px;
  }

  .home-top {
    margin-top: 1px;
  }

  /* 关于我们 */
  .home-aboutUs {
    width: 83%;
    height: 649px;
    position: relative;
    top: -80px;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 0 10px #ccc;
    border-radius: 8px;
  }

  .home-aboutUs-left,
  .home-aboutUs-right {
    height: 649px;
    display: flex;
    align-items: center;
  }

  .home-aboutUs-left {
    justify-content: center;
  }

  .home-aboutUs-right {
    flex-direction: column;
  }

  .home-aboutUs-right-p {
    font-size: 1.71rem;
    color: #333;
    margin-top: 93px;
    font-weight: bold;
  }

  .home-aboutUs-left img {
    margin-top: 80px;
    width: 11.5rem;
    height: 9.4rem;
  }

  .line {
    width: 66px;
    height: 8px;
    margin: 15px auto;
    background: linear-gradient(to right, #559641, #a9cd24);
    border-radius: 4px;
  }

  .home-aboutUs-right-text {
    width: 77%;
    height: 321px;
    margin-top: 40px;
  }

  .home-aboutUs-right-text p {
    line-height: 30px;
  }

  .home-aboutUs-right-text p:nth-of-type(3),
  .home-aboutUs-right-text p:nth-of-type(4) {
    letter-spacing: -0.1px;
  }

  .home-aboutUs-right-text p:nth-of-type(3) {
    margin-top: 30px;
  }

  .home-aboutUs-right-text p:nth-of-type(5) {
    letter-spacing: 0.14px;
  }

  .home-aboutUs-right-text p:nth-of-type(2) {
    letter-spacing: 0.8px;
    margin-top: 30px;
  }

  /* 未来世界 */
  .home-future {
    width: 100%;
    height: 655px;
    margin-top: 50px;
  }

  .home-future-top p:nth-of-type(1) {
    text-align: center;
    font-size: 52px;
    font-weight: 600;
    color: #ececec;
    line-height: 73px;
  }

  .home-future-top p:nth-of-type(2) {
    position: relative;
    top: -40px;
    text-align: center;
    font-size: 32px;
    line-height: 45px;
    color: #333333;
    font-weight: bold;
  }

  .home-future-left {
    height: 500px;
  }

  .home-future-left-title {
    font-size: 22px;
    font-weight: bold;
    line-height: 30px;
    margin-top: 59px;
    color: #333;
  }

  .home-future-left-text {
    margin-top: 42px;
  }

  .home-future-left-text p {
    line-height: 35px;
    /* margin-bottom: 20px; */
  }

  .home-future-right {
    position: relative;
    z-index: -1;
    margin-top: -2rem;
  }

  /* 旋转的样式 */
  .rotateBox {
    width: 34rem;
    height: 34rem;
  }

  .rotate {
    height: 100%;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid #efefef;
    position: relative;
    color: #fff;
  }

  .rotateItemText > p:first-child {
    line-height: 3.75rem;
    font-size: 2.5rem;
    text-transform: uppercase;
    padding-top: 1.25rem;
  }

  .rotateItemText > p:last-child {
    line-height: 1.25rem;
    font-size: 1rem;
  }

  .rotate > .rotateItem {
    position: absolute;
    left: -20px;
    top: -8px;
    width: 9rem;
    height: 9rem;
    text-align: center;
    border-radius: 50%;
    background: linear-gradient(to top right, #0493ff, #02cdff);
    box-shadow: 0 0 10px rgba(2, 198, 255, 0.5);
    transform-origin: 17.8125rem 17.8125rem;
    box-sizing: border-box;
  }

  .rotate > .rotateItem > .rotateItemText {
    height: 100%;
  }

  .rotate > .rotateItem:nth-child(1) {
    transform: rotate(150deg);
  }

  .rotate > .rotateItem:nth-child(2) {
    background: linear-gradient(to top right, #41dd9b, #3dbbb4);
    box-shadow: 0px 0px 15px 0px rgba(61, 190, 178, 0.54);
    transform: rotate(30deg);
  }

  .rotate > .rotateItem:nth-child(3) {
    background: linear-gradient(to top right, #fb9c48, #f07876);
    box-shadow: 0px 0px 15px 0px rgba(240, 121, 116, 0.54);
    transform: rotate(270deg);
  }

  .rotate > .rotateItem:nth-child(1) > .rotateItemText {
    transform: rotate(-150deg);
  }

  .rotate > .rotateItem:nth-child(2) > .rotateItemText {
    transform: rotate(-30deg);
  }

  .rotate > .rotateItem:nth-child(3) > .rotateItemText {
    transform: rotate(-270deg);
  }

  /* 小圆的样式 */
  .rotateBoxSmall {
    width: 21.875rem;
    height: 21.875rem;
    position: absolute;
    left: 17.7%;
    top: 17.7%;
  }

  .rotate-title {
    width: 16.25rem;
    height: 16.25rem;
    position: absolute;
    left: 17.5%;
    top: 25.7%;
    border-radius: 50%;
    border: 1px solid #efefef;
    box-shadow: 0 0 70px rgba(2, 198, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .rotate-title img {
    width: 12.5rem;
    height: 3rem;
  }

  .rotateSmall {
    height: 100%;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid #efefef;
    position: relative;
    color: #fff;
  }

  .rotateSmall > .rotateItem {
    position: absolute;
    left: -4px;
    top: -4px;
    width: 4.6875rem;
    height: 4.6875rem;
    text-align: center;
    border-radius: 50%;
    background: #ffffff;
    transform-origin: 10.9375rem 10.9375rem;
    box-sizing: border-box;
  }

  .rotateSmall > .rotateItem > .rotateItemText {
    height: 100%;
  }

  .rotateSmall > .rotateItem:nth-child(1) {
    color: #0498ff;
    box-shadow: 0px 0px 12px 0px rgba(4, 156, 255, 0.19);
    transform: rotate(80deg);
  }

  .rotateSmall > .rotateItem:nth-child(2) {
    color: #3dbdb2;
    box-shadow: 0px 0px 12px 0px rgba(61, 189, 178, 0.21);
    transform: rotate(-50deg);
  }

  .rotateSmall > .rotateItem:nth-child(3) {
    color: #f17c70;
    box-shadow: 0px 0px 12px 0px rgba(240, 121, 116, 0.14);
    transform: rotate(200deg);
  }

  .rotateSmall > .rotateItem:nth-child(1) > .rotateItemText {
    transform: rotate(-80deg);
  }

  .rotateSmall > .rotateItem:nth-child(2) > .rotateItemText {
    transform: rotate(50deg);
  }

  .rotateSmall > .rotateItem:nth-child(3) > .rotateItemText {
    transform: rotate(-200deg);
  }

  /* 我们的世界 */
  .home-our-word,
  .home-our-word img {
    width: 100%;
    height: 790px;
    background-color: transparent;
  }

  .home-our-word {
    margin-top: 39px;
  }

  .return {
    width: 76px;
    height: 76px;
    position: fixed;
    right: 3%;
    bottom: 21%;
    cursor: pointer;
  }

  /* 动画 */
  .home-aboutUs-left-animation {
    animation: homeAboutUsLeftAnimation 1s linear 0s;
  }

  .home-aboutUs-right-animation {
    animation: homeAboutUsRightAnimation 1s linear 0s;
  }

  .rotateBox-animation {
    animation: rotatemove 1.2s linear 0s;
  }

  .rotateBoxSmall-animation {
    position: absolute;
    left: 0px;
    top: 0px;
    transform-origin: 50% 50%;
    animation: rotatemoveSmall 1.2s linear 0s;
  }

  @keyframes homeAboutUsLeftAnimation {
    0% {
      transform: translateX(-50px);
    }
    50% {
      transform: translateX(-25px);
    }
    100% {
      transform: translateX(0);
    }
  }

  @keyframes homeAboutUsRightAnimation {
    0% {
      transform: translateX(50px);
    }
    50% {
      transform: translateX(25px);
    }
    100% {
      transform: translateX(0);
    }
  }

  @keyframes rotatemove {
    to {
      transform: rotate(0deg);
    }

    from {
      transform: rotate(20deg);
    }
  }

  @keyframes rotatemoveSmall {
    to {
      transform: rotate(0deg);
    }

    from {
      transform: rotate(-30deg);
    }
  }
</style>



